<script lang="ts" setup>
import { ref } from 'vue'
import { useSafeAreaHooks } from '@/composables/useSafeArea'

const { top } = useSafeAreaHooks()

const categories = ref(['推荐', '附近', '美食', '旅行', '穿搭', '美妆', '种草', '宠物'])
const currentCategory = ref(0)
const currentVideo = ref(0)

const videoList = ref([
  {
    videoUrl: 'https://ai-public.mastergo.com/ai/img_res/f3f263a4f070f2427cd36dded64e1609.jpg',
    poster: 'https://ai-public.mastergo.com/ai/img_res/f8d79895832c76884109d9dd9e90fc58.jpg',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/1f7d086e3f18e79462c1f3f76e6f0ea5.jpg',
    author: '美食达人',
    description: '探店｜这家藏在巷子里的小店也太好吃了吧！秘制卤肉饭香味扑鼻，一口就让人上瘾～',
    likes: 2893,
    comments: 156,
    collects: 342,
    isLiked: false,
    isCollected: false,
    musicName: '美食vlog背景音乐',
    tags: ['美食探店', '卤肉饭', '街边小店', '美食推荐'],
  },
  {
    videoUrl: 'https://ai-public.mastergo.com/ai/img_res/e8ca419ed49861cd6b8b38ec1832ceb9.jpg',
    poster: 'https://ai-public.mastergo.com/ai/img_res/3f412794b40fb5be49d3a1dc26ef6a3c.jpg',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/96e9e850c931a784d2b34f62972ed5c0.jpg',
    author: '旅行家',
    description: '太震撼了！终于打卡了向往已久的山谷，云海日出美得让人窒息！',
    likes: 3421,
    comments: 234,
    collects: 567,
    isLiked: false,
    isCollected: false,
    musicName: '旅行日记',
    tags: ['旅行', '风景', '日出', '户外探险'],
  },
])

function switchCategory(index: number) {
  currentCategory.value = index
}

function handleVideoChange(e: any) {
  currentVideo.value = e.detail.current
}

function handleVideoTap() {
  const video = uni.createVideoContext(`video-${currentVideo.value}`)
  video.play()
}

function handleVideoEnd() {
  if (currentVideo.value < videoList.value.length - 1) {
    currentVideo.value++
  }
}

function handleLike(index: number) {
  const video = videoList.value[index]
  video.isLiked = !video.isLiked
  video.likes += video.isLiked ? 1 : -1
}

function handleCollect(index: number) {
  const video = videoList.value[index]
  video.isCollected = !video.isCollected
  video.collects += video.isCollected ? 1 : -1
}

function handleComment() {
  uni.showToast({
    title: '评论功能开发中',
    icon: 'none',
  })
}

function handleShare() {
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline'],
  })
}
</script>

<template>
  <view class="container">
    <!-- 顶部分类导航 -->
    <view
      class="nav-wrapper"
      :style="{ top: `${top}px` }"
    >
      <scroll-view
        class="nav-scroll"
        scroll-x
      >
        <view class="nav-list">
          <view
            v-for="(item, index) in categories"
            :key="index"
            class="nav-item"
            :class="[currentCategory === index ? 'active' : '']"
            @tap="switchCategory(index)"
          >
            {{ item }}
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 视频播放区域 -->
    <swiper
      class="video-swiper"
      vertical
      :current="currentVideo"
      @change="handleVideoChange"
    >
      <swiper-item
        v-for="(video, index) in videoList"
        :key="index"
      >
        <view class="video-container">
          <video
            :id="`video-${index}`"
            class="video-player"
            :src="video.videoUrl"
            :poster="video.poster"
            object-fit="cover"
            @tap="handleVideoTap"
            @ended="handleVideoEnd"
          />

          <!-- 右侧操作栏 -->
          <view class="action-bar">
            <view class="user-avatar">
              <image
                :src="video.avatar"
                mode="aspectFill"
              />
            </view>
            <view
              class="action-item"
              @tap="handleLike(index)"
            >
              <wd-icon
                :name="video.isLiked ? 'heart-filled' : 'heart'"
                size="30px"
                :color="video.isLiked ? '#ff2442' : '#ffffff'"
              />
              <text>{{ video.likes }}</text>
            </view>
            <view
              class="action-item"
              @tap="handleComment"
            >
              <text class="i-mdi-chat-processing-outline text-[#fff] text-[23px]!" />
              <text>{{ video.comments }}</text>
            </view>
            <view
              class="action-item"
              @tap="handleCollect(index)"
            >
              <wd-icon
                :name="video.isCollected ? 'star-filled' : 'star'"
                size="28px"
                :color="video.isCollected ? '#ff2442' : '#ffffff'"
              />
              <text>{{ video.collects }}</text>
            </view>
            <view
              class="action-item"
              @tap="handleShare"
            >
              <uni-icons
                type="redo"
                size="28"
                color="#ffffff"
              />
              <text class="i-mdi-share text-[#fff] text-[28px]!" />
              <text>分享</text>
            </view>
          </view>

          <!-- 底部信息区 -->
          <view class="video-info">
            <view class="author">
              @{{ video.author }}
            </view>
            <view class="description">
              {{ video.description }}
            </view>
            <view class="music-info">
              <wd-icon
                name="bulletpoint"
                size="16px"
                color="#fff"
              />
              <text>{{ video.musicName }}</text>
            </view>
            <view class="tags">
              <text
                v-for="(tag, tagIndex) in video.tags"
                :key="tagIndex"
              >
                #{{ tag }}
              </text>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #000000;
}

.nav-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.3);
  padding: 20rpx 0;
}

.nav-scroll {
  width: 100%;
  white-space: nowrap;
}

.nav-list {
  display: inline-flex;
  padding: 0 20rpx;
}

.nav-item {
  padding: 10rpx 30rpx;
  margin: 0 10rpx;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  border-radius: 26rpx;
}

.nav-item.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  font-weight: bold;
}

.video-swiper {
  width: 100%;
  height: 100%;
}

.video-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.video-player {
  width: 100%;
  height: 100%;
}

.action-bar {
  position: absolute;
  right: 20rpx;
  bottom: 240rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 4rpx solid #ffffff;
}

.user-avatar image {
  width: 100%;
  height: 100%;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.action-item text {
  color: #ffffff;
  font-size: 12px;
}

.video-info {
  position: absolute;
  left: 20rpx;
  bottom: 40rpx;
  right: 120rpx;
  color: #ffffff;
}

.author {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.description {
  font-size: 14px;
  margin-bottom: 16rpx;
  line-height: 1.4;
}

.music-info {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 16rpx;
  font-size: 12px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.tags text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
</style>
